<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.png" mode="aspectFill"></image>

    <view class="bar-box" :style="{ marginTop: titleMargin + 'px' }">
      <image class="back" src="/static/images/back.png" @click="back"></image>
      <view class="title">提现</view>
    </view>

    <!-- 提现至银行卡 -->
    <block v-if="type === 1">
      <view class="input-box">
        <view class="row">
          <view>账户名</view>
          <input type="text" class="input" @input="changeRealNmae"/>
        </view>
        <view class="row">
          <view>账号</view>
          <input type="number" class="input" @input="changeBankNum"/>
        </view>
        <view class="row">
          <view>开户行</view>
          <input type="text" class="input" @input="changeBankName"/>
        </view>
      </view>

      <view class="withdraw-box">
        <view class="all-price">当前可提金额：{{ profit }}</view>
        <input type="number" class="price-input" @input="changePrice">
        <view class="text">温馨提示</view>
        <view class="text">请仔细核对提现账户信息，当前提现金额将在申请审核通过后转入当前账户</view>
        <view class="btn" @click="applyWithdraw">申请提现</view>
      </view>
    </block>
    <!-- 提现至微信零钱 -->
    <block v-else>
      <view class="withdraw-box" style="height: 60vh; margin-top: 100rpx;">
        <view class="all-price">当前可提金额：{{ profit }}</view>
        <input type="number" class="price-input" @input="changePrice">
        <view class="text">温馨提示</view>
        <view class="text">当前提现金额将在申请审核通过后转入微信零钱钱包</view>
        <view class="btn" @click="applyWithdraw">申请提现</view>
      </view>
    </block>

  </view>
</template>

<script>
export default {
  data() {
    return {
      titleMargin: 0, // 动态顶部间距
      type: 1, // 1: 提现至银行卡，2: 提现至微信零钱
      profit: 0,
      real_name: '',
      bank_num: '',
      bank_name: '',
      price: 0,
    };
  },
  created() {
    this.setDynamicMargin(); // 设置动态间距
  },

  onLoad: function (options) {
    uni.hideShareMenu();

    var {profit, type} = options;
    this.profit = parseInt(profit);
    this.type = parseInt(type);
  },

  methods: {
    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    back: function () {
      uni.navigateBack();
    },

    changeRealNmae: function (e) {
      this.real_name = e.detail.value;
    },

    changeBankNum: function (e) {
      this.bank_num = e.detail.value;
    },

    changeBankName: function (e) {
      this.bank_name = e.detail.value;
    },

    changePrice: function (e) {
      this.price = e.detail.value;
    },

    applyWithdraw: function () {
      var user_id = uni.getStorageSync('user_id'),
        price = this.price,
        real_name = this.real_name,
        bank_num = this.bank_num,
        bank_name = this.bank_name,
        type = this.type,
        timestamp = Date.parse(new Date()),//该值除以1000就是当前的时间戳,
        sync_timestamp = uni.getStorageSync('timestamp') ? uni.getStorageSync('timestamp') : 0,//获取时间戳缓存,
        now_timestamp = timestamp / 1000,
        long_time = now_timestamp - sync_timestamp;//距离上次点击按钮经过的时长（秒）,

      uni.showLoading({
        title: '提现申请中...',
        mask: true
      })

      if (long_time > 3) {
        //将当前时间戳存为缓存
        uni.setStorageSync('timestamp', timestamp / 1000);

        this.$http.post('/index/Api/applyWithdraw', {
          user_id, price, real_name, bank_num, bank_name, type
        }).then(res => {
          if (res.data.result == 1) {
            uni.removeStorageSync('timestamp');
            uni.hideLoading();

            var pages = getCurrentPages();
            var prevPage = pages[pages.length - 2];
            prevPage.$vm.info.profit = prevPage.$vm.info.profit - price

            uni.showToast({
              title: res.data.msg
            })
            setTimeout(() => {
              uni.navigateBack();
            }, 500)
          } else {
            this.$common.doErrorResult(res)
          }
        })

      }
    },
  },
}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .input-box {
    width: calc(90% - 120rpx);
    padding: 30rpx 60rpx;
    font-size: 36rpx;
    background: $main-background;
    border-radius: 40rpx;
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;

      .input {
        background: #fff;
        border-radius: 20rpx;
        padding: 10rpx 20rpx;
      }
    }

  }

  .withdraw-box {
    width: calc(90% - 200rpx);
    padding: 30rpx 100rpx;
    height: 50vh;
    font-size: 36rpx;
    background: $main-background;
    border-radius: 40rpx;
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .price-input {
      background: #fff;
      border-radius: 20rpx;
      padding: 10rpx 20rpx;
      margin: 15% 0;
      text-align: center;
    }

    .text {
      margin-bottom: 15%;
    }

    .btn {
      width: 100%;
      color: #fff;
      background: $main-color;
      text-align: center;
      padding: 20rpx 0;
      border-radius: 20rpx;
    }

  }

}
</style>

